<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '忘记密码',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50 px-4 py-12">
    <!-- 标题区域 -->
    <view class="text-center mb-8">
      <view class="text-2xl font-bold mb-2">重置密码</view>
      <view class="text-gray-500">{{ currentStep === 1 ? '验证手机号' : '设置新密码' }}</view>
    </view>

    <!-- 步骤一：手机号验证 -->
    <view v-if="currentStep === 1" class="space-y-4">
      <!-- 手机号输入框 -->
      <view class="flex items-center bg-white rounded-lg px-4 h-12">
        <uni-icons type="phone" size="20" color="#666"></uni-icons>
        <input type="text" v-model="phone" placeholder="请输入手机号" class="flex-1 ml-2" />
      </view>

      <!-- 验证码输入框 -->
      <view class="flex items-center bg-white rounded-lg px-4 h-12">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input type="text" v-model="verifyCode" placeholder="请输入验证码" class="flex-1 ml-2" />
        <button
          class="border rounded px-3 py-1 text-sm"
          :class="canSendCode ? 'text-blue-600 border-blue-600' : 'text-gray-400 border-gray-400'"
          @click="sendVerifyCode"
        >
          {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
        </button>
      </view>

      <!-- 下一步按钮 -->
      <button
        class="w-full h-12 bg-blue-600 text-white rounded-lg text-lg font-medium mt-8 flex items-center justify-center"
        @click="handleVerifyCode"
      >
        下一步
      </button>
    </view>

    <!-- 步骤二：设置新密码 -->
    <view v-else class="space-y-4">
      <!-- 新密码输入框 -->
      <view class="flex items-center bg-white rounded-lg px-4 h-12">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input
          type="password"
          password
          v-model="newPassword"
          placeholder="请输入新密码"
          class="flex-1 ml-2"
        />
      </view>

      <!-- 确认密码输入框 -->
      <view class="flex items-center bg-white rounded-lg px-4 h-12">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input
          type="password"
          password
          v-model="confirmPassword"
          placeholder="请确认新密码"
          class="flex-1 ml-2"
        />
      </view>

      <!-- 确认修改按钮 -->
      <button
        class="w-full h-12 bg-blue-600 text-white rounded-lg text-lg font-medium mt-8 flex items-center justify-center"
        @click="handleResetPassword"
      >
        确认修改
      </button>
    </view>
  </view>

  <!-- 成功提示弹窗 -->
  <view
    v-if="showSuccessModal"
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
  >
    <view class="bg-white rounded-lg p-6 w-80">
      <view class="flex justify-center mb-4">
        <view class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
          <!-- 这里用一个临时的对勾图标，后续可替换成实际图标 -->
          <text class="text-white text-2xl">✓</text>
        </view>
      </view>
      <view class="text-center text-lg font-medium mb-6">修改密码成功</view>
      <button
        class="w-full h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center"
        @click="backToLogin"
      >
        返回登录
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentStep = ref(1)
const phone = ref('')
const verifyCode = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const countdown = ref(0)
const showSuccessModal = ref(false)
const canSendCode = ref(true)

// 发送验证码
const sendVerifyCode = () => {
  if (!canSendCode.value || countdown.value > 0) return

  // 这里添加手机号验证逻辑
  if (phone.value.length !== 11) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    })
    return
  }

  countdown.value = 60
  canSendCode.value = false

  // 开始倒计时
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      canSendCode.value = true
    }
  }, 1000)

  // TODO: 调用发送验证码API
  console.log('发送验证码到', phone.value)
}

// 验证验证码
const handleVerifyCode = () => {
  if (!phone.value || !verifyCode.value) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    })
    return
  }

  // TODO: 验证验证码
  currentStep.value = 2
}

// 重置密码
const handleResetPassword = () => {
  if (!newPassword.value || !confirmPassword.value) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    })
    return
  }

  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({
      title: '两次密码输入不一致',
      icon: 'none',
    })
    return
  }

  // TODO: 调用重置密码API
  console.log('重置密码')
  showSuccessModal.value = true
}

// 返回登录页
const backToLogin = () => {
  uni.navigateBack()
}
</script>

<style scoped>
page {
  background-color: #f9fafb;
}
</style>
